<script setup lang="ts">
import type { video } from '@/types/video';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { postCoverUrlAPI } from '@/services/video';
//获取视频封面
const blogCardList = ref<video[]>([])
const rightBlogCardList = ref<video[]>([])
const postCoverUrlData = async () => {
  const res = await postCoverUrlAPI()
  blogCardList.value = res.data
  //右类个性化数据
  rightBlogCardList.value = blogCardList.value.slice().reverse()
}
//初始化
onLoad(() => {
  postCoverUrlData()
})

</script>

<template>
  <view class="tutorial">
    <video
      src="https://hyprun.oss-cn-guangzhou.aliyuncs.com/%E8%B7%91%E6%AD%A5%E6%95%99%E5%AD%A6%E8%A7%86%E9%A2%91%E7%AC%AC%E4%BA%8C%E9%9B%86%20.mp4"
      style="width: 100%;height: 200px;border-radius: 4px;margin-top: 10px;"></video>
    <!-- 搜索 -->
    <view style="margin: 16px 0;height: 40px;display: flex;position: relative;justify-content: space-between;">
      <image src="../static/images/搜索.png" style="width: 16px;height: 16px;
            position: absolute;top: 12px;left: 10px;
      " />
      <input type="text" style="background-color: #fff;height: 100%;width: 85%;
            padding: 4px 14px 4px 28px;border-radius: 6px;
      ">

      <!-- 筛选 -->
      <view
        style="display: flex;flex-direction: column;padding: 8px 0 0 0;justify-content: space-between;align-items: center;">
        <image src="../static/images/筛选.png" style="width: 16px;height: 16px;"></image>
        <text style="font-size: 9px;">筛选</text>
      </view>

    </view>
    <scroll-view :scroll-y="true" style="flex: 1;">
      <!-- blog -->
      <view class="blog">

        <!-- left -->
        <view class="blogCardColumn">
          <view v-for="(item, index) in blogCardList" :key="item.videoId">
            <navigator class="blogCard" :url="`/pages/video/video?id=${item.videoId}`">
              <image :src="item.coverUrl" style="width: 100%;height: 140px;border-radius: 4px 4px 0 0;" />
              <view style="padding:  10px;">
                <text style="font-size: 12px;color: black;">{{ item.title }} | {{ item.category }}</text>
                <view style=" display: flex;margin-top: 6px;justify-content: space-between;align-items: center;">
                  <image :src="item.avator" style="width: 24px;height: 24px;border-radius: 12px;margin-right: 4px;" />
                  <text style="font-size: 10px;color: black;flex: 1;">{{ item.username }}</text>
                  <image src="../static/images/爱心.png" style="width: 16px;height: 16px;"></image>
                </view>
              </view>
            </navigator>
            <BlogCard v-if="index % 2 === 0" :data="item"></BlogCard>
          </view>
        </view>

        <!-- right -->
        <view class="blogCardColumn">
          <view v-for="(item, index) in rightBlogCardList" :key="item.videoId">
            <navigator class="blogCard" :url="`/pages/video/video?id=${item.videoId}`">
              <image :src="item.coverUrl" style="width: 100%;height: 150px; border-radius: 4px 4px 0 0;" />
              <view style="padding:  25px;">
                <text style="font-size: 12px;color: black;">{{ item.title }} | {{ item.category }}</text>
                <view style=" display: flex;margin-top: 6px;justify-content: space-between;align-items: center;">
                  <image :src="item.coverUrl" style="width: 24px;height: 24px;border-radius: 12px;margin-right: 4px;" />
                  <text style="font-size: 10px;color: black;flex: 1;">{{ item.username }}</text>
                  <image src="../static/images/爱心.png" style="width: 16px;height: 16px;"></image>
                </view>
              </view>
            </navigator>
            <BlogCard v-if="index % 2 === 0" :data="item"></BlogCard>
          </view>
        </view>

      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
.tutorial {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0px 4%;
  background-color: rgba(245, 245, 245, 1);
}

.blog {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.blogCardColumn {
  width: 49%;
  background-color: rgba(245, 245, 245, 1);
}

.blogCard {
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}

.blogCard {
  background-color: #fff;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}
</style>
